<template>
    <div @click="to_essay_detail" class="essay_item" style=" width: 100%;">
        <div class="essay_top">
            <div class="placeholder" style="width: 100%;height: 15vw;">

            </div>
            <el-image style="width: 100%;position: absolute;top:0;height: 15vw" :src="base_url + item.cover_img"
                fit="fill">
                <template #placeholder>
                    <div class="image-slot" style="width: 100%;height: 100%;">Loading<span class="dot">...</span></div>
                </template>
            </el-image>
        </div>
        <div class="essay_info">
            <div style="flex:1;display: flex;align-items: center;">
                <img style="width: 10%;margin-right: 0.5vw;margin-left: 0.5vw;"
                    :src="base_url + '/assets/svg/home/essay/timer.svg'">
                <span style="font-weight: bold;">{{ item.publish_time }}</span>
            </div>
            <div
                style="font-weight: bold;font-size: 1vw;flex:1; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; ">
                {{ item.title }}</div>
        </div>
        <div class="essay_content">
            <span>
                {{ item.textual }}</span>
        </div>
        <div class="tips">
            <E_Tag v-for="it in item.tags" :key="it.id" :tip="it.title">
            </E_Tag>
        </div>
    </div>
</template>

<script setup lang="ts">
import E_Tag from "@/components/Essay/E_Tag.vue"
import { useRouter } from "vue-router";
import { add_views } from "@/apis/web/WebApi"
const base_url = import.meta.env.VITE_APP_URL
const props = defineProps(['item'])
const router = useRouter()
const to_essay_detail = async () => {
    router.push(`/essay_detail/${props.item._id}`)
    console.log("急啊急啊")
    await add_views(props.item._id)
}
</script>

<style lang="scss" scoped>
.essay_item {
    margin: 1vw;
    box-shadow: 0 0 10px black;
    transition: all 0.5s;
    overflow: hidden;
    border-radius: 10px;
    height: 28vw;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.essay_item:hover {
    transform: translateY(-5px);

}

.essay_top {
    width: 100%;
    overflow: hidden;
    position: relative;

    .el-image {
        transition: all 1s;
    }

    .el-image:hover {
        transform: scale(1.1);
    }
}

.essay_info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1vw;
    margin-top: 0.5vw;
}

.essay_content {
    text-indent: 2em;
    margin-top: 1vh;
    font-size: 1vw;
    padding: 5px;
    line-height: 2vw;

    span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

}

.image_slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;

}

.tips {
    display: flex;
    flex-wrap: wrap;
}
</style>